<!DOCTYPE html>
<html lang="zh">

<head>
  <title></title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://unpkg.com/vue@next"></script>
  <link href="../css/style.css" rel="stylesheet"> </head>

<body>
<div id="myApp">
  <ol>
    <game-item v-for="item in games" v-bind:game="item"></game-item>
  </ol>
</div>
<script>
  const GameList = {
    data() {
      return {
        games: [
          { title: '斗地主' },
          { title: '打麻雀' },
          { title: 'UNO' }
        ]
      }
    }
  }

  const app = Vue.createApp(GameList)

  app.component('game-item', {
    props: ['game'],
    template: '<li>{{ game.title }}</li>'
  })

  app.mount('#myApp')

</script>
</body>

</html>